﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="ringbtn,layer"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">样式</h3>
    <div class="row row-aline">
        <div id="ringbtn0"></div>
        <div id="ringbtn1"></div>
        <div id="ringbtn2"></div>
        <div id="ringbtn3"></div>
        <div id="ringbtn4"></div>
        <div id="ringbtn5"></div>
    </div>

    <h3 class="spliter">大圆环，绑定事件</h3>
    <div class="row row-aline">
        <div id="ringbtn20"></div>
        <div id="ringbtn21"></div>
        <div id="ringbtn22"></div>
        <div id="ringbtn23"></div>
        <div id="ringbtn24"></div>
    </div>

    <h3 class="spliter">渐变圆环</h3>
    <div class="row row-aline">
        <div id="ringbtn30"></div>
        <div id="ringbtn31"></div>
        <div id="ringbtn32"></div>
        <div id="ringbtn33"></div>
        <div id="ringbtn34"></div>
    </div>


    <script>
        rayui.ready(function () {

            var ringbtn = rayui.ringbtn,
                layer = rayui.layer;
            //1
            (function () {

                ringbtn.render({
                    elem: '#ringbtn0'
                });

                ringbtn.render({
                    elem: '#ringbtn1',
                    ringColor: "#de9d1c",
                    label: "确定"
                });

                ringbtn.render({
                    elem: '#ringbtn2',
                    innerColor: "#084c6b",
                    fontColor: "#fff",
                    label: "确定"
                });

                ringbtn.render({
                    elem: '#ringbtn3',
                    innerRadius: 30
                });

                ringbtn.render({
                    elem: '#ringbtn4',
                    ringColor: "#de9d1c",
                    innerRadius: 30
                });
                ringbtn.render({
                    elem: '#ringbtn5',
                    label: "字数太长了，放不下"
                });
            })();


            //2
            (function () {

                ringbtn.render({
                    elem: '#ringbtn20',
                    outerRadius: 70,
                    innerRadius: 55,
                    click: function () {
                        layer.msg("点击一次20", { time: 2000, shade: false });
                    }
                });

                ringbtn.render({
                    elem: '#ringbtn21',
                    outerRadius: 70,
                    innerRadius: 55,
                    ringColor: "#de9d1c",
                    label: "确定",
                    click: function () {
                        layer.msg("点击一次21", { time: 2000, shade: false });
                    }
                });

                var cur = 1;
                var ringins22 = ringbtn.render({
                    elem: '#ringbtn22',
                    outerRadius: 70,
                    innerRadius: 55,
                    label: "打开",
                    click: function () {
                        if (cur % 2 === 1)
                            ringins22.setLabel("关闭").setRingColor("#F00");
                        else
                            ringins22.setLabel("打开").setRingColor("#0b9869");
                        cur++;
                    }
                });

                var cur23 = 1;
                var ringins23 = ringbtn.render({
                    elem: '#ringbtn23',
                    outerRadius: 70,
                    innerRadius: 55,
                    innerColor: "#084c6b",
                    fontColor: "#fff",
                    label: "打开",
                    click: function () {
                        if (cur23 % 2 === 1)
                            ringins23.setLabel("关闭").setInnerColor("#F00");
                        else
                            ringins23.setLabel("打开").setInnerColor("#084c6b");
                        cur23++;
                    }
                });
            })();


            //3
            (function () {

                ringbtn.render({
                    elem: '#ringbtn30',
                    direction: 'left',
                    ringColor:"#0b9869,#97d0bd"
                });
                
                ringbtn.render({
                    elem: '#ringbtn31',
                    direction: 'left',
                    ringColor: "#de9d1c,#f1dcb3",
                    label: "确定"
                });

                var cur = 1;
                var ringins22 = ringbtn.render({
                    elem: '#ringbtn32',
                    direction: 'left',
                    ringColor: "#0b9869,#97d0bd",
                    label: "打开",
                    click: function () {
                        if (cur % 2 === 1)
                            ringins22.setLabel("关闭").setRingColor("#e42323,#ecadad");
                        else
                            ringins22.setLabel("打开").setRingColor("#0b9869,#97d0bd");
                        cur++;
                    }
                });

            })();

        })

    </script>

    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

属性：
outerRadius: 外圆半径，默认50，
innerRadius: 内圆半径，默认40
ringColor: 圆环颜色，默认"#0b9869"绿色
innerColor: 内圆颜色，默认"#fff"白色
fontColor: 字体颜色，默认"#000"黑色
fontSize: 字体大小，默认20，单位px
label: 按钮标签，可以是html标签
direction: 渐变方向，CSS3中linear-gradient的属性，低版本浏览器不支持
</pre>

</body>
</html>